/*
 * @Description: vue.config.js 配置文件
 * @Author: zheng yiliang
 * @Date: 2021-04-23 22:30:45
 * @LastEditTime: 2021-06-13 23:50:00
 * @LastEditors: zheng yiliang
 */
// const path = process.env.VUE_APP_BASE_API
// const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  publicPath: './',
  devServer: {
    // port: 443,
    // https: true,
    // host: 'zhengyiliang.cn',
    proxy: {

      // '/api/qq': {
      //   target: 'https://graph.qq.com/', // 你请求的第三方接口
      //   changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
      //   pathRewrite: {  // 路径重写，
      //     '^/api/qq': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
      //   }
      // },
      '/api': { // 这里最好有一个 /
        target: 'http://127.0.0.1:3001', // 后台接口域名
        ws: true, // 如果要代理 websockets，配置这个参数
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    // https: true
  },
  chainWebpack: config => {
    /**
     * 删除懒加载模块的 prefetch preload，降低带宽压力
     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
     * 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
     */
    config.plugins.delete("prefetch").delete("preload");
    config.resolve.symlinks(true);
    config
      // 开发环境
      .when(
        process.env.NODE_ENV === "development",
        // sourcemap包含完整的信息
        config => config.devtool("source-map")
      )
      // 非开发环境
      .when(process.env.NODE_ENV === "production", config => {
        // 移除console,debugger,并使用sourceMap
        config.optimization.minimizer('terser').tap((args) => {
          args[0].terserOptions.compress.drop_console = true
          return args
        })
        // config.optimization.minimizer([
        //   new TerserPlugin({
        //     sourceMap: false,
        //     terserOptions: {
        //       compress: {
        //         warnings: false,
        //         drop_console: true,
        //         drop_debugger: true,
        //         pure_funcs: []
        //       }
        //     }
        //   })
        // ]);
      });
    // markdown
    // config.module
    //   .rule("md")
    //   .test(/\.md$/)
    //   .use("text-loader")
    //   .loader("text-loader")
    //   .end();

    // image exclude
    // const imagesRule = config.module.rule("images");
    // imagesRule
    //   .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
    //   .exclude.add(resolve("src/assets/svg-icons/icons"))
    //   .end();
    // 重新设置 alias
    // config.resolve.alias
    //   .set("@", resolve("src"))
    //   .set("@api", resolve("src/api"))
    //   .set("public", resolve("public"));
    // node
    config.node.set("__dirname", true).set("__filename", true);
    // babel-polyfill 加入 entry
    config.entry("app").add("babel-polyfill").end();
    // 判断环境加入模拟数据
    // if (process.env.VUE_APP_BUILD_MODE !== "mock") {
    //   entry.add("@/mock").end();
    // }
  },
  // configureWebpack: {
  //   externals: {
  //     'QC': 'QC'
  //   }
  // }
  // configureWebpack: {
  //   // provide the app's title in webpack's name field, so that
  //   // it can be accessed in index.html to inject the correct title.
  //   name: name,
  //   resolve: {
  //     alias: {
  //       '@': resolve('src')
  //     }
  //   }
  // },
  // chainWebpack (config) {
  //   // it can improve the speed of the first screen, it is recommended to turn on preload
  //   config.plugin('preload').tap(() => [
  //     {
  //       rel: 'preload',
  //       // to ignore runtime.js
  //       // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
  //       fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
  //       include: 'initial'
  //     }
  //   ])

  //   // when there are many pages, it will cause too many meaningless requests
  //   config.plugins.delete('prefetch')

  //   config
  //     .when(process.env.NODE_ENV !== 'development',
  //       config => {
  //         config
  //           .plugin('ScriptExtHtmlWebpackPlugin')
  //           .after('html')
  //           .use('script-ext-html-webpack-plugin', [{
  //             // `runtime` must same as runtimeChunk name. default is `runtime`
  //             inline: /runtime\..*\.js$/
  //           }])
  //           .end()
  //         config
  //           .optimization.splitChunks({
  //             chunks: 'all',
  //             cacheGroups: {
  //               libs: {
  //                 name: 'chunk-libs',
  //                 test: /[\\/]node_modules[\\/]/,
  //                 priority: 10,
  //                 chunks: 'initial' // only package third parties that are initially dependent
  //               },
  //               elementUI: {
  //                 name: 'chunk-elementUI', // split elementUI into a single package
  //                 priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
  //                 test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
  //               },
  //               commons: {
  //                 name: 'chunk-commons',
  //                 test: resolve('src/components'), // can customize your rules
  //                 minChunks: 3, //  minimum common number
  //                 priority: 5,
  //                 reuseExistingChunk: true
  //               }
  //             }
  //           })
  //         // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
  //         config.optimization.runtimeChunk('single')
  //       }
  //     )
  // }
  // 引入scss全局变量
  // css: {
  //   loaderOptions: {
  //     sass: {
  //       implementation: require('sass'), // This line must in sass option
  //       prependData: '@import \'@/styles/index.scss\';'
  //     },
  //     // postcss: {
  //     //   plugins: [
  //     //     require('postcss-plugin-px2rem')({
  //     //       rootValue: 19.2, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
  //     //       // unitPrecision: 5, //允许REM单位增长到的十进制数字。
  //     //       propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
  //     //       // propBlackList: ['margin', 'padding', 'border', 'width', 'height', 'lineHeight'], //黑名单
  //     //       exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
  //     //       // selectorBlackList: [], //要忽略并保留为px的选择器
  //     //       // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
  //     //       // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
  //     //       mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
  //     //       minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
  //     //     }),
  //     //   ]
  //     // }
  //   }
  // }

}
